<template>

  <div>

    <div style="margin-top:10px; width: calc(100% );height:calc(100vh - 160px);">
      <RelationGraph ref="seeksRelationGraph"
                     :options="graphOptions"
                     :on-node-click="onNodeClick"
                     :on-line-click="onLineClick" >
        <!--插槽-->
        <div slot="node" slot-scope="{node}">
          <el-avatar :size="70" v-if="node.data.icoPath" fit="fill" :src="node.data.icoPath"></el-avatar>
          <el-avatar :size="70" v-else fit="fill" :src="require('@/assets/images/avatar/avatar12.png')"></el-avatar>
          <!--<p style="color: white">{{node.data.userName}}</p>-->
          <p style="color: #E6A23C" v-if="node.data.userName === 'UNKNOWN_NAME_DEFAULT'">名字未知</p>
          <p style="color: aqua" v-else>{{node.data.userName}}</p>
        </div>
      </RelationGraph>
    </div>

    <UserDetailed ref="userDetailedRef"></UserDetailed>
  </div>

</template>

<script>

  import RelationGraph from 'relation-graph'
  import http from '@/utils/http'
  import UserDetailed from '../UserDetailed.vue'

  export default {
    // 使用  relation-graph  做的关系线
    name: "RelationGraphLineImages",
    components: {
      RelationGraph,
      UserDetailed,
    },
    data() {
      return {
        // 关系图选项
        graphOptions: {
          // 是否在工具栏中显示切换线条形状的按钮
          allowSwitchLineShape: true,
          // 是否在工具栏中显示切换连接点位置的按钮
          allowSwitchJunctionPoint: true,
          // 默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）当布局为树状布局时应使用tb或者lr，这样才会好看
          // defaultJunctionPoint: 'border',

          /// 可选设置参数,全部参数在 http://relation-graph.com/#/docs/graph
          // 图谱水印url,如：http://ai-mark.cn/images/ai-mark-desc.png
          backgrounImage: null,
          // 只在右下角显示水印，不重复显示水印
          backgrounImageNoRepeat: false,
          // 是否显示工具栏
          allowShowMiniToolBar: true,
          // 是否显示缩略图
          allowShowMiniView: false,
          // 是否显示搜索框
          allowShowMiniNameFilter: true,
          // 是否禁用图谱的缩放功能，这里特指通过鼠标滚轮进行缩放的功能，禁用后你依然可以通过图谱工具栏按钮进行缩放
          disableZoom: false,
          // 是否禁用图谱中节点的拖动
          disableDragNode: false,
          // 当图谱的大小发生变化时，是否重新让图谱的内容看起来居中
          moveToCenterWhenResize: true,
          // 默认为根节点添加一个被选中的样式
          defaultFocusRootNode: true,
          // 是否在右侧菜单栏显示放大缩小的按钮，此设置和disableZoom不冲突
          allowShowZoomMenu: true,
          // 是否在拖动节点后让子节点跟随
          isMoveByParentNode: false,
          // 是否根据缩放比例隐藏节点内容
          hideNodeContentByZoom: false,
          // 默认的节点形状，0:圆形；1:矩形
          defaultNodeShape: 1,
          // 默认的节点背景颜色
          defaultNodeColor: '#132F42',
          // 默认的节点文字颜色
          defaultNodeFontColor: '#ccc',
          // 默认的节点边框颜色
          defaultNodeBorderColor: null,
          // 默认的节点边框粗细（像素）
          defaultNodeBorderWidth: 1,
          // 默认的节点展开/关闭按钮位置（left/top/right/bottom）hide
          // defaultExpandHolderPosition: 'hide',
          // 默认的线条颜色
          defaultLineColor: '#FDFEFF',
          // 默认的线条粗细（像素）
          defaultLineWidth: 1,
          // 默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
          defaultLineShape: 1,
          // defaultLineMarker: null,
          // 默认是否显示连线文字
          defaultShowLineLabel: true,
          // 默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）当布局为树状布局时应使用tb或者lr，这样才会好看
          defaultJunctionPoint: 'border',
          // 布局方式，可以设置多个布局，用于切换查看布局参数配置说明,
          layouts: [
            {
              label: '组织',
              layoutName: 'tree',
              layoutClassName: 'seeks-layout-center',
              useLayoutStyleOptions: true,
              from: 'top',
              // defaultNodeWidth: 25,
              // defaultNodeHeight: '100',
              defaultJunctionPoint: 'tb',
              defaultNodeShape: 0,
              defaultLineShape: 4,
              defaultNodeBorderWidth: 0,
              defaultLineColor: 'rgba(0, 186, 189, 1)',
              defaultNodeColor: '#132F42',
              min_per_width: 60,
              // max_per_width: 70,
              min_per_height: 300,
              // levelDistance: '300'
            },
            {
              // 布局描述
              label: '中心',
              // 布局方式（tree树状布局/center中心布局/force自动布局）
              layoutName: 'center',
              // 当使用这个布局时，会将此样式添加到图谱上
              layoutClassName: 'seeks-layout-center',
              // 是否使用该布局的样式设置覆盖全局样式设置（当有多个布局可供切换时，此功能可以实现不同布局下整体样式的切换）
              useLayoutStyleOptions: true,
              // defaultNodeWidth: '50',
              // defaultNodeHeight: '50',
              // 默认的节点边框粗细（像素）
              defaultNodeBorderWidth: 0,
              defaultNodeColor: '#132F42',
              // 默认的节点文字颜色
              defaultNodeFontColor: '#ccc',
              // 默认的线条颜色
              defaultLineColor: '#FDFEFF',
              // 默认的节点形状，0:圆形；1:矩形
              defaultNodeShape: 0,
              // 默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
              defaultLineShape: 1,
              // 节点距离限制:节点之间横向距离最小值
              // min_per_width: 150,
              // 节点距离限制:节点之间横向距离最大值
              // max_per_width: null,
              // 节点距离限制:节点之间纵向距离最小值
              // min_per_height: null,
              // 节点距离限制:节点之间纵向距离最大值
              // max_per_height: null,
              // 层级距离系数，默认为1，可以为小数，用于调节中心布局不同层级之间的距离，实现连线比较长的视觉效果
              distance_coefficient: 1.5,
            },
            {
              label: '树状',
              layoutName: 'tree',
              layoutClassName: 'seeks-layout-center',
              useLayoutStyleOptions: true,
              from: 'left',
              // defaultNodeWidth: '100',
              // defaultNodeHeight: '30',
              defaultJunctionPoint: 'lr',
              defaultNodeShape: 0,
              defaultLineShape: 3,
              defaultNodeBorderWidth: 0,
              defaultLineColor: '#cccccc',
              defaultNodeColor: '#132F42',
              min_per_width: 250,
              // max_per_width: 400,
              min_per_height: 120,
              // max_per_height: 170
            }
          ],
        }
      }
    },
    methods: {
      /**
       * 初始化获取数据
       * node 相关的参数：http://relation-graph.com/#/docs/node 这里直接后台传入
       */
      init(){
        http.get("/diagram/getRelationGraph", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          let data = res.data;
          // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置
          // 设置/重新设置图谱中的数据,jsonData：图谱数据,不能为空，jsonData中需要包含三要素（rootId、nodes、links）数据格式示例;callback:当设置完成后的回调函数,可以为空;
          this.$refs.seeksRelationGraph.setJsonData(data, (seeksRGGraph) => {
            // 完成初始化后的一些调用
          })

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 刷新布局
       * 当图谱中的节点看起来不正常时，你都可以调用refresh方法来让布局器重新为节点分配位置。
       */
      refreshGraph(){
        this.$refs.seeksRelationGraph.refresh()
      },
      /**
       * 选中图谱的根节点居中并选中
       */
      focusRootNode(){
        this.$refs.seeksRelationGraph.focusRootNode()
      },
      /**
       * 根据节点id在图谱中选中该节点并居中
       * @param nodeId 节点id
       */
      focusNodeById(nodeId){
        this.$refs.seeksRelationGraph.focusNodeById(nodeId)
      },
      /**
       * 根据节点id获取节点对象;
       * @param nodeId 节点id
       */
      getNodeById(nodeId){
        this.$refs.seeksRelationGraph.getNodeById(nodeId)
      },
      /**
       * 下载图片，将当前图谱导出为图片
       * @param format 可以为：png/jpg，默认为png;
       */
      downloadAsImage(format){
        this.$refs.seeksRelationGraph.downloadAsImage(format)
      },
      /**
       * 节点被点击
       * @param nodeObject 数据，这就是后台的Node类数据，可以获取详情
       * @param $event 事件
       */
      onNodeClick(nodeObject, $event) {
        // console.log('onNodeClick:', nodeObject.data)
        this.$refs.userDetailedRef.openUserDetailed(nodeObject.data)
      },
      /**
       * 线被点击
       * @param lineObject 数据
       * @param $event 事件
       */
      onLineClick(lineObject, $event) {
        console.log('onLineClick:', lineObject)
      },
    },
    mounted(){
      this.init()
    },
  }
</script>

<style scoped>

  .el-card-conf {
    /*max-height:820px;*/
    /*height: 820px;*/
    /*overflow-y: auto; */
    /*overflow-x: hidden;*/
  }

  /*设置背景的颜色*/
  /deep/ .rel-map[data-v-2964abc9] {
    background-color: #132F42;
  }

  /*解决火狐上样式错乱，不居中等问题*/
  /deep/ .rel-node {
    transform: none !important;
  }

  .c-my-node{
    background-position: center center;
    background-size: 100%;
    border:#ff8c00 solid 2px;
    height:80px;
    width:80px;
    border-radius: 40px;
  }
  .c-node-name{
    width:160px;margin-left:-40px;text-align:center;margin-top:85px;
  }

</style>
